<template>
  <div style="">
    <div class="div1">
      <div class="div1-1">
        <router-link to="/"
          ><img src="../assets/imgs/xiaomilogo.png" class="imgLOGO" alt=""
        /></router-link>
      </div>
      <div class="div1-2">
        <span class="span1">支付订单</span>
      </div>
      <div class="div1-3">
        <el-button type="text" style="color: black" v-if="Username">{{
          this.Username
        }}</el-button>
        <el-button
          type="text"
          style="color: black"
          @click="$router.push('/Load')"
          v-if="!Username"
          >登录</el-button
        >
        <el-button
          type="text"
          style="color: black"
          @click="$router.push('/Load')"
          v-if="!Username"
          >注册</el-button
        >
      </div>
    </div>
    <div class="div2">
      <div class="div2-1">
        <div class="div2-1-1">
          <img src="../assets/imgs/okok.jpg" alt="" />
        </div>
        <div class="div2-1-2">
          <div class="div2left"><span>订单提交成功！去付款咯～</span></div>
          <div class="div2right">应付总额:<span>{{Paymentdata[0].countprice}}</span></div>
          <div class="collapse">
            <el-collapse>
              <el-collapse-item
                :title="'请在' + times + '秒内完成支付, 超时后将取消订单'"
              >
                <div>
                  订单号：<span>{{Paymentdata[0].Onumber}}</span>
                </div>
                <div>
                  收货信息：<span>{{Paymentdata[0].Padds}}</span>
                </div>
                <div>
                  商品名称：<span v-for="(item,index) in Paymentdata" :key="index">{{item.Pcomm}}<br/></span>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Username: "",
      times: 300,
      Paymentdata: {},
    };
  },
  methods: {
    //倒计时
    getTime() {
      this.timer = setInterval(() => {
        this.times--;
        if (this.times === 0) {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    showPayment() {
      this.$axios
        .get(
          "http://localhost:16673/api/Order/showPayment?onumber=" +
            this.$route.query.onumber
        )
        .then((res) => {
          this.Paymentdata = res.data;

        });
    },
  },
  created() {
    this.showPayment()
    this.getTime();
    console.log(this.$route.query.onumber)
    this.Username = sessionStorage.getItem("Username");
    
  },
};
</script>

<style scoped>
.div1 {
  margin: 0 auto;
  width: 100%;
  height: 100px;
  margin-top: 8px;
  border-bottom: 3px solid #ff6700;
}
.div1-1 {
  float: left;
  margin-top: 5px;
}
.div1-2 {
  float: left;
  height: 100px;
  line-height: 90px;
  margin-left: 30px;
}
.div1-3 {
  float: right;
  line-height: 100px;
  margin-right: 135px;
}
.imgLOGO {
  width: 65px;
  margin-left: 125px;
  margin-top: 7px;
}
.span1 {
  color: #424242;
  font-size: 30px;
}

.div2 {
  width: 100%;
  height: 900px;
  background-color: #f5f5f5;
  /* 不会跟随内嵌盒子移动 */
  overflow: hidden;
}
.div2-1 {
  float: left;
  width: 1250px;
  height: auto;
  margin-left: 125px;
  margin-top: 50px;
  background-color: white;
}
.div2-1-1 {
  float: left;
}
.div2-1-2 {
  float: left;
  width: 1000px;
}
.div2left {
  float: left;
  font-size: 25px;
  margin-top: 60px;
}
.div2right {
  float: right;
  font-size: 18px;
  margin-top: 60px;
}
.collapse {
  width: 1000px;
  float: left;
  margin-top: 20px;
}
.el-collapse-item__header {
  font-size: 30px;
}
</style>
<style>
.el-collapse-item__header {
  font-size: 15px;
  height: 70px;
}
.el-collapse-item__content {
  font-size: 15px;
  line-height: 40px;
}
</style>